<template>
  <div class="personnel-overview-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main class="container">
      <div class="container_left">
        <div class="header-content">
          <div class="content">
            <span class="date">{{ currentTime }}</span>
            <div class="num">
              <label>在场人数</label>
              <span>{{ attendanceNumber }}</span>
            </div>
          </div>
          <div class="search-container">
            <div class="search-item">
              <label>时间：</label>
              <el-date-picker
                v-model="currentDate"
                value-format="yyyy-MM-dd"
                :picker-options="{
                  disabledDate: this.setDisabledData
                }"
                type="date"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
            <div class="search-item">
              <el-select v-model="workId" placeholder="请选择工区"></el-select>
            </div>
          </div>
        </div>
        <div class="echarts-container">
          <div class="content">
            <div class="title">
              <span class="text" style="font-size: 18px;">人数统计情况</span>
              <div class="btns">
                <el-checkbox
                  :value="hasPlan"
                  @change="(val) => handleChangeShow('hasPlan', val)">
                  显示计划值
                </el-checkbox>
                <el-checkbox
                  :value="hasWork"
                  @change="(val) => handleChangeShow('hasWork', val)">
                  显示工种
                </el-checkbox>
                <i v-if="hasTabSet" class="el-icon-setting" @click="handleSet"></i>
              </div>
            </div>
            <ul class="date-btns">
              <li :class="dateId === 'day' ? 'active' : ''" @click="handleDateClick('day')">按天</li>
              <li :class="dateId === 'week' ? 'active' : ''" @click="handleDateClick('week')">按周</li>
              <li :class="dateId === 'month' ? 'active' : ''" @click="handleDateClick('month')">按月</li>
            </ul>
          </div>
          <div class="echarts-content">
            <base-echarts ref="statistics" :options="statisticsOptions"></base-echarts>
          </div>
        </div>
      </div>
      <div class="container_right">
        <div class="echarts-age echarts">
          <div class="content">
            <div>
              <span class="title" style="font-size: 18px;">年龄分析</span>
              <div :class="['avg', hasShowAvg ? 'show' : '']">
                <span>现场平均年龄 &nbsp; 38岁</span>
                <span>总平均年龄 &nbsp; 41岁</span>
              </div>
            </div>
<!--            <div class="btn">-->
<!--                <span :class="ageType === 'all' ? 'active' : ''" @click="handleAgeChange('all')">-->
<!--                  全部-->
<!--                </span>-->
<!--              <span :class="ageType === 'man' ? 'active' : ''" @click="handleAgeChange('man')">-->
<!--                  男性-->
<!--                </span>-->
<!--              <span :class="ageType === 'woman' ? 'active' : ''" @click="handleAgeChange('woman')">-->
<!--                  女性-->
<!--                </span>-->
<!--            </div>-->
          </div>
          <base-echarts ref="ageEcharts" :options="ageOptions"></base-echarts>
        </div>
        <div class="echarts echarts-place">
          <div v-if="workData && workData.length" class="place-list">
            <div
              v-for="(item, index) in currentWorkData"
              :class="['item', workName === item.name ? 'active' : '']"
              :key="index">
              <span class="bg" :style="{ background: item.itemStyle.color }"></span>
              <span class="name" :title="item.name">{{ item.name }}</span>
              <span class="percentage">{{ setPercentage(item.value) }}%</span>
            </div>
          </div>
          <div v-if="workData && workData.length > 5" class="btns">
            <i class="el-icon-caret-bottom" @click="handleChange('bottom')"></i>
            <i class="el-icon-caret-top" @click="handleChange('top')"></i>
          </div>
          <base-echarts ref="workEcharts" :options="workOptions"></base-echarts>
        </div>
        <div class="echarts echarts-gender">
          <base-echarts ref="placeEcharts" :options="placeOptions"></base-echarts>
        </div>
      </div>
    </main>
    <!-- 设置计划弹框 -->
    <set-plan-model
      :date="paramDate"
      :visible="visible"
      @edit="handlePlanEdit"
      @cancel="visible = false">
    </set-plan-model>
  </div>
</template>

<script>
import baseEcharts from '@/components/echarts/base';
import setPlanModel from '@/components/project/personnel/setPlanModel';
import Breadcrumb from '@/components/public/Breadcrumb';

// 人员总览
export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '人员管理',
        },
        {
          name: '人员总览'
        }
      ],
      // 工区id
      workId: '',
      // 在场人数
      attendanceNumber: 0,
      // 当前选择查看的时间
      currentDate: this.$moment().format('YYYY-MM-DD'),
      beginDay: '',
      endDay: '',
      // 年龄分析类型
      ageType: 'all',
      // 人员信息类型
      tabType: '0',
      hasPlan: false,
      // 是否显示工种
      hasWork: true,
      // 人数统计切换类型
      dateId: 'day',
      visible: false,
      // 年龄图表数据
      ageData: {},
      // 籍贯数据
      placeData: [],
      workDataAll: [],
      workData: [],
      // 人数统计数据
      statisticsData: [],
      statisticsTimeData: [],
      // 工种人数总量
      // total: 0,
      // 籍贯当前页码
      pageIndex: 1,
      // 计划值
      planValue: null,
      workName: '',
    };
  },
  computed: {
    // 项目id
    projectId() {
      return this.$store.state.currentProjectId;
    },
    // 人数统计图表
    statisticsOptions() {
      return {
        textStyle: {
          color: '#bac4ff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          right: 30,
          textStyle: {
            color: '#fff'
          },
          data: this.statisticsLegend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            rotate: 30
          },
          axisTick: {
            alignWithLabel: true
          },
          data: this.statisticsXCategory
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          },
          splitLine: { // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              color: 'rgba(186, 196, 255, .2)'
            }
          }
        },
        series: this.statisticsData
      };
    },
    // 人数统计图表Legend配置
    statisticsLegend() {
      return [];
    },
    // 人数统计图表X轴配置
    statisticsXCategory() {
      if (this.dateId === 'week') {
        return ['第一周', '第二周', '第三周', '第四周'];
      }
      if (this.dateId === 'month') {
        // 是否显示工种
        const xList = this.hasWork ? this.workDataAll : this.statisticsTimeData;
        return xList.reduce((pre, next) => {
          const { day } = next;
          if (day) {
            const [year, month] = day.split('-');
            const monthStr = `${year}-${month}`;
            !pre.includes(monthStr) && pre.push(monthStr);
          }
          return pre;
        }, []);
      }
      if (this.hasWork) return this.workDataAll.map(item => item.day);
      return this.statisticsTimeData.map(item => item.day);
    },
    // 年龄图表配置
    ageOptions() {
      return {
        textStyle: {
          color: '#bac4ff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['18岁及以下', '19-30岁', '31-40岁', '41-50岁', '51-60岁', '60岁及以上'],
          axisLabel: { interval: 0 },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          },
          splitLine: { // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              color: 'rgba(186, 196, 255, .2)'
            }
          }
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            // barWidth: 40,
            data: this.ageSeries,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(60, 126, 211, 1)' },
                  { offset: 1, color: 'rgba(60, 126, 211, 0.3)' }
                ]
              )
            }
          }
        ]
      };
    },
    // 年龄图表x轴配置
    ageSeries() {
      const keys = [
        'less18',
        'between19and30',
        'between31and40',
        'between41and50',
        'between51and60',
        'over61'
      ];
      return keys.map(key => this.ageData[key]);
    },
    // 工种图表配置
    workOptions() {
      return {
        title: {
          text: '工种',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            right: 230,
            label: {
              show: false
            },
            data: this.workData
          }
        ]
      };
    },
    // 籍贯图表配置
    placeOptions() {
      return {
        title: {
          text: '籍贯分析',
          textStyle: { color: '#fff' }
        },
        textStyle: {
          color: '#bac4ff'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.placexAxisData,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          // 刻度
          axisTick: {
            show: false
          },
          splitLine: { // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              color: 'rgba(186, 196, 255, .2)'
            }
          }
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            // barWidth: 80,
            data: this.placeSeriesData,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(81, 202, 216, 1)' },
                  { offset: 1, color: 'rgba(81, 202, 216, 0.3)' }
                ]
              )
            }
          }
        ]
      };
    },
    // 籍贯X轴展示信息
    placexAxisData() {
      return this.placeData.map(item => item.province);
    },
    // 籍贯图表展示数据
    placeSeriesData() {
      return this.placeData.map(item => item.count);
    },
    // 当前展示的籍贯详情
    currentWorkData() {
      const index = (this.pageIndex - 1) * 5;
      return this.workData.slice(index, index + 5);
    },
    // 是否展示平均值
    hasShowAvg() {
      return /man/g.test(this.ageType);
    },
    // 人数总量
    total() {
      return this.workData.reduce((pre, next) => {
        const value = isNaN(next.value) ? 0 : Number(next.value);
        return pre + value;
      }, 0);
    },
    // 当前参数所需时间
    paramDate() {
      return this.currentDate || this.$moment().format('YYYY-MM-DD');
    },
    // 当前展示的时间
    currentTime() {
      return this.$moment(this.currentDate || new Date()).format('MM月DD日');
    }
  },
  watch: {
    // 是否显示计划值
    hasPlan() {
      this.setPlanValue();
    },
    // 当前选择的时间
    currentDate: {
      // immediate: true,
      async handler(val, oldVal) {
        if (val !== oldVal) {
          this.setparamsDate();
          await Promise.all([
            this.getAttendanceNumber(),
            this.getStatisticsByJob(),
            this.getAttendanceByProvince(),
            this.getAttendanceByAge(),
            this.getStatisticsList()
          ]);
          this.setPlanValue();
        }
      }
    },
    // 工种
    hasWork(value) {
      value ? this.getStatisticsByJob() : this.getStatisticsList();
    },
    // 人数统计切换类型
    dateId() {
      this.setparamsDate();
      this.hasWork
        ? this.getStatisticsByJob()
        : this.getStatisticsList();
    }
  },
  async mounted() {
    this.setparamsDate();
    await Promise.all([
      this.getAttendanceNumber(),
      this.getStatisticsByJob(),
      this.getAttendanceByProvince(),
      this.getAttendanceByAge(),
      this.getStatisticsList()
    ]);
    this.workEchartsEvent();
  },
  components: {
    baseEcharts,
    Breadcrumb,
    setPlanModel
  },
  methods: {
    /**
     * 获取在场总人数
     */
    async getAttendanceNumber() {
      if (!this.projectId) return;
      const { success, data } = await this.$Model.getAttendanceNumber({
        project_id: this.projectId,
        date: this.paramDate
      });
      if (success && data.data) {
        this.attendanceNumber = data.data;
      }
    },
    /**
     * 获取根据月份分类的计划人数
     * @param options {?Object} 请求参数
     */
    async getPlanNumber(options = {}) {
      const [year, month] = this.paramDate.split('-');
      const { success, data } = await this.$Model.getPlanNumber({
        year,
        month,
        project_id: this.projectId,
        ...options
      });
      if (success && Array.isArray(data.data)) {
        this.planValue = data.data[0] && data.data[0].plan_number;
      }
    },
    /**
     * 获取根据时间段分类的在场人数
     */
    async getStatisticsList() {
      this.setEchartsLoading(true);
      const { success, data } = await this.$Model.getAttendanceStatistics({
        project_id: this.projectId,
        begin_day: this.beginDay,
        end_day: this.endDay
      });
      this.setEchartsLoading(false);
      if (success && Array.isArray(data.data)) {
        this.statisticsTimeData = data.data;
        this.setStatisticsData();
      }
    },
    /**
     * 获取根据省份分类的在场人数
     */
    async getAttendanceByProvince() {
      const { success, data } = await this.$Model.getAttendanceByProvince({
        project_id: this.projectId,
        date: this.paramDate
      });
      if (success && Array.isArray(data.data)) {
        this.placeData = data.data.sort((a, b) => b.count - a.count);
      }
    },
    /**
     * 获取根据年龄段分类的在场人数
     */
    async getAttendanceByAge() {
      const { success, data } = await this.$Model.getAttendanceByAge({
        project_id: this.projectId,
        date: this.paramDate
      });
      if (success && data.data) {
        this.ageData = data.data;
      }
    },
    /**
     * 获取根据时间段及工种分类的在场人数
     */
    async getStatisticsByJob() {
      this.setEchartsLoading(true);
      const { success, data } = await this.$Model.getAttendanceStatisticsByJob({
        project_id: this.projectId,
        begin_day: this.beginDay,
        end_day: this.endDay
      });
      this.setEchartsLoading(false);
      if (success && Array.isArray(data.data)) {
        const { classification } = data.data.find(item => (
          item.day === this.paramDate
        )) || {};
        this.workDataAll = data.data.sort((a, b) => {
          const timeA = new Date(a.day).getTime();
          const timeB = new Date(b.day).getTime();
          return timeA - timeB;
        });
        const newWorkData = this.setWorkData(classification);
        let otherList = newWorkData.length > 5
          ? newWorkData.slice(5, newWorkData.length)
          : [];
        otherList = otherList.reduce((pre, next) => {
          let currentItem = pre[0] ? pre[0] : {};
          const currentVal = Number(currentItem.value) || 0;
          currentItem = {
            ...next,
            name: '其它',
            value: parseFloat(currentVal + Number(next.value)).toFixed(0) - 0
          };
          pre = [currentItem];
          return pre;
        }, []);
        this.workData = [
          ...this.setWorkData(classification).slice(0, 4),
          ...otherList
        ];
        if (this.workData[0]) this.workName = this.workData[0].name;
        this.setStatisticsData();
      }
    },
    /**
     * 设置图表loading
     * @param hasShow {Boolean} 是否loading
     */
    setEchartsLoading(hasShow) {
      const myCharts = this.$refs.statistics && this.$refs.statistics.myCharts;
      const workEcharts = this.$refs.workEcharts && this.$refs.workEcharts.myCharts;
      if (hasShow) {
        myCharts && myCharts.showLoading({
          maskColor: 'rgba(0, 0, 0, 0.7)'
        });
        workEcharts && workEcharts.showLoading({
          maskColor: 'rgba(0, 0, 0, 0.7)'
        });
        return;
      }
      myCharts && myCharts.hideLoading();
      workEcharts && workEcharts.hideLoading();
    },
    // 设置人数统计数据
    setStatisticsData() {
      const config = {
        type: 'bar',
        stack: '总量',
        label: {
          show: false
        },
        data: []
      };
      if (!this.hasWork) {
        // 不显示工种
        this.setStatisticsFromData(config);
        return;
      }
      // 工种类型
      const jobList = this.workDataAll.reduce((pre, next) => {
        const { classification } = next;
        const currentList = classification.map(item => item.job);
        return [...new Set([...pre, ...currentList])];
      }, []);
      // 按月、周和天设置数据
      const setData = (name) => {
        const result = [];
        if (this.dateId === 'week') {
          for (let i = 0; i < this.workDataAll.length; i += 7) {
            const weekList = this.workDataAll.slice(i, i + 7);
            const count = weekList.reduce((pre, next) => {
              const { classification } = next;
              const current = classification && classification.find(val => (
                val.job === name
              ));
              const val = current && isNaN(current.count)
                ? 0
                : Number(current ? current.count : 0);
              return pre + val;
            }, 0);
            // const avg = count ? parseFloat(count / 7).toFixed(1) : 0;
            result.push(count);
          }
          return result;
        }
        if (this.dateId === 'month') {
          const obj = {};
          this.workDataAll.forEach(item => {
            if (!item.day) return;
            const [year, month] = item.day.split('-');
            const key = `${year}-${month}`;
            const hasIn = Object.keys(obj).includes(key);
            if (hasIn) {
              obj[key].push(item);
              return;
            }
            obj[key] = [item];
          });
          return Object.keys(obj).map(key => {
            const list = obj[key] || [];
            return list.reduce((pre, next) => {
              const { classification } = next;
              const current = classification && classification.find(val => (
                val.job === name
              ));
              const val = current && isNaN(current.count)
                ? 0
                : Number(current ? current.count : 0);
              return pre + val;
            }, 0);
          });
        }
        return this.workDataAll.map(item => {
          const { classification } = item;
          const current = classification && classification.find(val => (
            val.job === name
          ));
          return current ? current.count : 0;
        });
      };
      // 人数统计工种数据
      const statisticsData = jobList.map(name => {
        return {
          ...config,
          name,
          data: setData(name)
        };
      });
      const getTotal = (arr) => {
        if (Array.isArray(arr)) {
          return arr.reduce((pre, next) => pre + next);
        }
        return 0;
      };
      statisticsData.sort((a, b) => {
        const totalA = getTotal(a.data);
        const totalB = getTotal(b.data);
        return totalB - totalA;
      });
      const len = statisticsData.length;
      const newSortData = [];
      statisticsData.forEach((item, index) => {
        if (len > 5) {
          if (index < 4) {
            newSortData.push(item);
            return;
          }
          if (newSortData[4]) {
            newSortData[4] = {
              ...newSortData[4],
              data: newSortData[4].data.map((v, index) => {
                return Number(v) + Number(item.data[index]);
              })
            };
            return;
          }
          newSortData.push({
            ...item,
            name: '其它'
          });
          return;
        }
      });
      this.statisticsData = newSortData;
    },
    /**
     * 不显示工种的人员统计
     * @param config {Object} 图表配置
     */
    setStatisticsFromData(config) {
      const setData = (time = 7) => {
        const result = [];
        for (let i = 0; i < this.statisticsTimeData.length; i += time) {
          const sliceList = this.statisticsTimeData.slice(i, i + time);
          const count = sliceList.reduce((pre, next) => {
            const nextVal = isNaN(next.count) ? 0 : next.count || 0;
            return pre + nextVal;
          }, 0);
          result.push(count);
        }
        return result;
      };
      let data = [];
      if (this.dateId === 'day') {
        data = this.statisticsTimeData.map(item => item.count);
      } else if (this.dateId === 'week') {
        data = setData();
      } else {
        const obj = {};
        this.statisticsTimeData.forEach(item => {
          if (!item.day) return;
          const [year, month] = item.day.split('-');
          const key = `${year}-${month}`;
          const hasIn = Object.keys(obj).includes(key);
          if (hasIn) {
            obj[key].push(item);
            return;
          }
          obj[key] = [item];
        });
        data = Object.keys(obj).map(key => {
          const list = obj[key] || [];
          return list.reduce((pre, next) => {
            const nextVal = isNaN(next.count) ? 0 : next.count || 0;
            return pre + nextVal;
          }, 0);
        });
      }
      this.statisticsData = [
        {
          ...config,
          itemStyle: {
            color: new this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: 'rgba(60, 126, 211, 1)' },
                { offset: 1, color: 'rgba(60, 126, 211, 0.3)' }
              ]
            )
          },
          data
        }
      ];
    },
    /**
     * 设置计划值
     */
    async setPlanValue() {
      this.hasPlan && await this.getPlanNumber();
      const reuslt = {
        markLine: {
          label: {
            show: true,
            position: 'end',
            formatter: '{b}: \n{c}'
          },
          lineStyle: {
            color: 'red',
            type: 'solid'
          },
          data: [
            { name: '计划值', yAxis: this.planValue }
          ]
        }
      };
      this.statisticsData = this.statisticsData.map(item => {
        if (this.hasPlan && !isNaN(this.planValue)) {
          return {
            ...item,
            ...reuslt
          };
        }
        delete item.markLine;
        return item;
      });
    },
    /**
     * 设置开始和结束时间
     */
    setparamsDate() {
      if (this.dateId === 'day') {
        // 按天
        const time = 14 * 24 * 60 * 60 * 1000;
        const currentTime = new Date(`${this.paramDate} 23:59:59`).getTime();
        this.endDay = this.paramDate;
        this.beginDay = this.$moment(currentTime - time).format('YYYY-MM-DD');
        return;
      }
      const [year, month] = this.paramDate.split('-');
      const checkMonth = month >= 12;
      const nextMonth = checkMonth ? '01' : Number(month) + 1;
      const nextYear = checkMonth ? Number(year) + 1 : year;
      const endTime = new Date(`${nextYear}-${nextMonth}`).getTime();
      const nextDate = new Date(endTime - 24 * 3600000).getDate();
      this.endDay = `${year}-${month}-${nextDate}`;
      // 按周/月
      if (this.dateId === 'week') {
        this.beginDay = `${year}-${month}-01`;
        return;
      }
      const newYear = checkMonth ? year : year - 1;
      const newMonth = checkMonth ? '01' : Number(month) + 1;
      this.beginDay = `${newYear}-${newMonth}-01`;
    },
    /**
     * 设置工种数据
     * @param data {Array} 工种数据
     */
    setWorkData(data) {
      if (!Array.isArray(data)) return [];
      const setColor = () => {
        return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
      };
      return data
        .map(item => ({
          value: isNaN(item.count) ? 0 : Number(item.count),
          name: item.job,
          itemStyle: {
            color: setColor()
          }
        }))
        .sort((a, b) => b.value - a.value);
    },
    /**
     * 设置工种百分比
     * @param value {Number} 当前工种的值
     */
    setPercentage(value) {
      const val = Number(value);
      if (isNaN(val)) return 0;
      return parseFloat(val / this.total * 100).toFixed(2);
    },
    // 设置置灰时间
    setDisabledData(time) {
      return time.getTime() > Date.now();
    },
    /**
     * 工种图表鼠标事件监听
     */
    workEchartsEvent() {
      const myCharts = this.$refs.workEcharts && this.$refs.workEcharts.myCharts;
      if (!myCharts) return;
      // 默认高亮第一个数据
      myCharts.dispatchAction({
        type: 'highlight',
        name: this.workName
      });
      // setTimeout(() => {
      // }, 1000);
      // 监听鼠标移入图表，设置文案高亮
      myCharts.on('mouseover', (params) => {
        // 取消高亮
        myCharts.dispatchAction({
          type: 'downplay',
          name: this.workName
        });
        if (params) {
          this.workName = params.name;
          myCharts.dispatchAction({
            type: 'highlight',
            name: this.workName
          });
        }
      });
    },
    /**
     * 设置人数计划
     */
    handleSet() {
      this.visible = true;
    },
    /**
     * 筛选人数统计图表
     * @param type {String} 修改类型
     * @param value {Boolean} 修改值
     */
    handleChangeShow(type, value) {
      this[type] = value;
    },
    /**
     * 人数统计情况图表时间切换
     * @param type {String} 切换类型
     */
    handleDateClick(type) {
      this.dateId = type;
    },
    /**
     * 籍贯分页查看
     * @param type {String} 翻页类型
     */
    handleChange(type) {
      const len = Math.ceil(this.workData.length / 5);
      if (type === 'top') {
        this.pageIndex > 1 && this.pageIndex--;
        return;
      }
      this.pageIndex < len && this.pageIndex++;
    },
    /**
     * 年龄图表切换
     * @param type {String} 切换类型
     */
    handleAgeChange(type) {
      this.ageType = type;
    },
    /**
     * 计划是否编辑
     * @param time {String} 编辑的计划时间
     */
    handlePlanEdit(time) {
      if (!time) return;
      const [year, month] = time.split('-');
      const [currentYear, currentMonth] = this.paramDate.split('-');
      if (
        Number(year) === Number(currentYear) &&
        Number(month) === Number(currentMonth)
      ) {
        this.setPlanValue();
      }
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .personnel-overview-page {
    width: 100%;
    height: 100%;
    background: $baseBg;
    .echarts {
      position: relative;
      overflow: hidden;
      &:after {
        display: block;
        content: '';
        position: absolute;
        top: -5px;
        left: -16px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 15px solid $mainColor;
        opacity: .1;
        pointer-events: none;
      }
    }
    .container {
      width: 100%;
      height: calc(100% - 40px);
      padding: 10px;
      display: flex;
      justify-content: space-between;
      &_left {
        width: 66.3%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        .header-content {
          width: 100%;
          height: 80px;
          display: flex;
          justify-content: space-between;
          background: $mainBg;
          padding: 0 20px;
          border-radius: 10px;
          .content {
            width: 50%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 26px;
            .date {
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              font-weight: bold;
              margin-right: 50px;
            }
            .num {
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              label {
                font-size: 20px;
                margin-right: 20px;
              }
              span {
                font-family: font-lcd;
                font-size: 30px;
                color: #4c99ff;
                font-weight: bold;
                letter-spacing: 3px;
                text-shadow: 0 1px 13px #4c99ff;
              }
            }
          }
          .search-container {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .search-item {
              margin-left: 20px;
              /deep/ .el-select {
                width: 150px;
              }
            }
          }
        }
        .echarts-container {
          width: 100%;
          height: calc(100% - 93px);
          background-color: $mainBg;
          border-radius: 10px;
          padding: 20px;
          position: relative;
          &:after {
            display: block;
            content: '';
            position: absolute;
            top: -5px;
            left: -16px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 15px solid $mainColor;
            opacity: .1;
            pointer-events: none;
          }
          .content {
            width: 100%;
            height: 60px;
            position: relative;
            .title {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .text {
                font-weight: bold;
              }
              .btns {
                font-size: 24px;
                display: flex;
                align-items: center;
                /deep/ .el-checkbox {
                  color: #fff;
                }
                i {
                  cursor: pointer;
                  margin-left: 20px;
                  &:hover {
                    color: $mainColor;
                  }
                }
              }
            }
            .date-btns {
              position: absolute;
              width: 120px;
              height: 30px;
              bottom: -25px;
              left: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 20px;
              li {
                width: 40px;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 13px;
                background-color: rgba(161, 161, 161, .5);
                cursor: pointer;
                transition: all .3s;
                z-index: 1;
                &.active {
                  background-color: $successBtn;
                }
                &:nth-child(1) {
                  border-radius: 5px 0 0 5px;
                }
                &:nth-last-child(1) {
                  border-radius: 0 5px 5px 0;
                }
              }
            }
          }
          .echarts-content {
            width: 100%;
            height: calc(100% - 60px);
          }
        }
      }
      &_right {
        width: 33.2%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .echarts {
          width: 100%;
          height: 33%;
          background-color: $mainBg;
          border-radius: 10px;
        }
        .echarts-age {
          padding: 10px 10px 0;
          .content {
            width: 100%;
            height: 30px;
            color: #fff;
            position: relative;
            > div {
              width: 100%;
              height: 25px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .title {
                font-weight: bold;
              }
              .avg {
                opacity: 0;
                transition: all .2s;
                &.show {
                  opacity: 1;
                }
              }
              &.btn {
                position: absolute;
                bottom: -25px;
                width: 128px;
                height: 22px;
                font-size: 12px;
                background: $baseBg;
                border-radius: 15px;
                z-index: 1;
                span {
                  cursor: pointer;
                  width: 40px;
                  height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  text-align: center;
                  border-radius: 15px;
                  transition: all .3s;
                  &.active {
                    transition: all .2s;
                    background: $lightBtnBg;
                  }
                }
              }
            }
          }
          /deep/ .echarts-base-comp {
            width: 100%;
            height: calc(100% - 30px);
          }
        }
        .echarts-place {
          padding: 10px 10px 0;
          position: relative;
          .place-list {
            position: absolute;
            right: 30px;
            top: calc(50% - 100px);
            width: 250px;
            height: 199px;
            color: #fff;
            overflow: hidden;
            z-index: 1;
            .item {
              width: 100%;
              height: 40px;
              padding: 5px 10px;
              display: flex;
              border-radius: 5px;
              justify-content: flex-start;
              align-items: center;
              font-size: 14px;
              transition: all .2s;
              &.active {
                background: $baseBg;
                font-size: 20px;
              }
              .name {
                max-width: 150px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0 20px;
              }
              .bg {
                width: 12px;
                height: 12px;
                display: inline-block;
                border-radius: 50%;
              }
            }
          }
          .btns {
            width: 50px;
            height: 20px;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 15px;
            right: 180px;
            i {
              color: #fff;
              font-size: 18px;
              margin: 0 5px;
              cursor: pointer;
              z-index: 1;
              &:hover {
                color: $mainColor;
              }
            }
          }
        }
        .echarts-gender {
          padding: 10px 10px 0;
        }
      }
      .iconfont {
        cursor: pointer;
      }
    }
  }
</style>
